<template>
	<view style="overflow: hidden;min-height: 100%; background-color: #f8f8f8;">
		<!-- 导航栏 -->
		<order-header class="custom-navbar" title="售后单详情" 
			:status="statusInfo.status"
			:image="statusInfo.image"
			@back="navBack"
			>
		</order-header>
		<!-- 导航栏占位盒子 -->
		<!-- #ifdef APP-PLUS -->
		<view  :style="{height:  '240rpx',marginTop:statusBarHeight+'rpx'}"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
		<view :style="{height:  '240rpx'}"></view>
		<!-- #endif -->
		<view class="u-p-l-30 u-p-t-30 u-p-r-30" >
			<!-- 卖家信息 -->
			<view class="u-p-l-35 u-p-r-35 u-p-t-30 u-p-b-30 u-m-b-20" style="background-color: #FFFFFF;" >
				<view class="u-font-bold u-font-28">{{info.approverShopName}}</view>
				<view class="fui-oh__wrap">
					<view style="width: 100%;box-sizing: border-box;">
						<view class="u-flex u-m-t-10 u-row-between">
							<view class="u-font-28" style="font-weight: 500;">
								退款信息
							</view>
							<view class="u-font-28" style="color: #FF551A; font-weight: 500;">
								退款金额￥{{info.amount}}
							</view>
						</view>
						<view class="u-flex u-m-t-10 u-row-between">
							<view class="u-font-28" style="color: #999;">退款原因</view>
							<view class="u-font-28 u-text-right" style="color: #999;">{{info.reason}}</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 支付凭证 -->
			<view class="u-p-l-35 u-p-r-35 u-p-t-30 u-p-b-30 u-m-b-20" style="background-color: #FFFFFF;" 
			v-if="info.attachments.length!=0">
				<view class="u-font-32 u-m-b-30">描述和凭证</view>
				<view class="u-font-28 " style="color: #999;">{{info.applicantRemarks}}</view>
				<fui-upload immediate
					class="u-m-t-20"
					:file-list="fileList"
					:url="baseUrl + 'api/Resource/UploadToOss'"
					:height="133"
					:width="'133rpx'"
					:max="maxPayResource"
					keepOne
					:isDel="false"
					>
				</fui-upload>
			</view>
			
			<!-- 新建订单 -->
			
			<view class="u-bg-white u-p-30">
				<view class="u-flex u-row-between">
					<text class="u-font-28 u-font-bold">售后商品</text>
					<view v-if="info.afterSalesType == 1" class="u-font-24 u-theme-light theme-box">
						退款
					</view>
					<view v-else class="u-font-24 u-theme-light theme-box">
						退货
					</view>
					
				</view>
			</view>
			
			<view class="box-color box-padding u-m-b-20">
				<view v-if="role == 'sale'" class="u-font-30 u-m-b-30">
					{{ info.buyerShopName }}
				</view>
				<view v-for="(item,index) in info.items" @click="$mRouter.push({ route: '/pages/index/xiangqing?id=' + item.itemId + '&sellerShopId=' + orderInfo.sellerShopId  })" style="position: relative;" :key="index" class="item u-flex u-m-b-20">
					<image :src="item.itemResourceUrl" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;" mode=""></image>
					<view class="u-flex-col u-row-around u-flex-1 u-m-l-20" style="height: 100rpx">
						<view class="u-flex u-row-between">
							<text class="u-font-24" style="height: 40rpx;overflow-y: hidden;">{{ item.itemName }}</text>
							<text class="u-font-24">￥{{ item.actuallyPrice }}</text>
						</view>
						<view class="u-flex u-row-between">
							<view class="new-grey-box">
								{{ item.specification }}
							</view>
							<view class="new-grey-box" style="margin-right: 0;">
								x{{ item.quantity }}
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-right u-p-t-30  u-p-b-14">
					<text class="u-font-30 u-theme-main">退款额</text>
					<text :style="{fontSize: '32rpx', color: badgeColor}">￥{{ info.amount }}</text>
				</view>
			</view>
				
		</view>
		<!-- 占位盒子 -->
		<view style="height: 160rpx;" v-if="isPayment"></view>
		<!-- 底部固定客服 -->
		<view class="footer u-flex" v-if="isPayment&&info.status  === 0">
			<fui-button text="取消售后单" class="u-m-r-20" @click="modalShow = true" height="80rpx" width="100%" radius="45rpx" size="32" background="#F8F8F8" color="#999"></fui-button>
		</view>
		<fui-modal title="提示" :show="modalShow" :descr="modalContent" maskClosable @click="handleCancel" @cancel="modalShow = false">
		</fui-modal>
	</view>
</template>
<script>
	import { useUserStore } from '@/store/user.js';
	import { useShopStore } from '@/store/shop.js';
	import { orderStore } from '@/store/order.js';
	import { mapState } from 'pinia';
	import OrderHeader from '@/components/order-header.vue';
	import snLine from '@/components/sn-line.vue';
	export default {
		components: {
			OrderHeader,snLine
		},
		data() {
			return {
				detailShow:false,
				id: null,
				alipayDom: '',
				modalShow: false,
				modalContent: '您确定要撤销该售后订单',
				delPayOrderShow:false,
				delContent:'您是否确定将此订单从发票单中移除？',
				delOrderId:'',
				orderStatus:['待付款','待发货','待收货','待评价','已完成','已取消'],
				payMethodStatus:['微信支付','支付宝支付','银联支付','线下支付','线下支付'],
				info: {
					attachments:[]
				},
				state: 0,
				statusInfo: {},
				payTypeShow: false,
				paymentMethod: null,
				expire: '',
				expireTimer: undefined,
				isGoPay:false,
				loading:false,
				maxPayResource:1,
				delResource:false,
				payList:[],
				openList:[],
				offlineSet:{},
				fileList: [],
				routeFrom:"",
				routeOrderId:'',
				visible:false,
				visibleText:'展开详情',
				cancelReason:''
			}
		},
		computed:{
			...mapState(useUserStore,{
				isPurchase:'isPurchase',
				isPayment:'isPayment',
				header: (state)=>{
					Authorization: 'Bearer ' + state.user.access_token
				}
			}),
			...mapState(orderStore,['afterStatus']),
			...mapState(useShopStore, {
				storeShop: 'shop',
			})	
		},
		async onLoad(options) {
			this.id = options.id;
			this.routeFrom = options.routeFrom;
			this.routeOrderId = options.orderId
			await this.getOrderDetail()
		},
		methods: {
			readMore() {
				if (this.visible) {
					this.visible = false
					this.visibleText = '展开详情'
				} else {
					this.visible = true
					this.visibleText = '收起详情'
				}
			},
			itemChange(data){
				this.$set(this.openList,data.index,data.isOpen)
			},
			async handleCancel(e) {
				if(e.index ===1){
					this.loading = true;
					
					const res = await this.$newHttp.put('api/v1.3/AfterSalesOrder/Withdraw',{ id: this.info.id });
					this.loading = false;
					if(res.code === 200){
						this.back();
					}else{
						uni.$fui.toast(res.erroMessage)
					}
				}
				this.modalShow = false;
			},
			// 获取发票单详情
			async getOrderDetail() {
				this.loading = true;
				let params = {
					id: this.id,
					shopId:this.storeShop.id,
				}
				const res = await this.$newHttp.get('api/v1.3/AfterSalesOrder/ApplicantGetById', {params: params});
				this.loading = false;
				if(res.code == 200){
					this.info = res.data;
					this.maxPayResource = res.data.attachments.length;
					this.fileList = res.data.attachments.map(item => {
						return item.url
					})
					this.statusInfo = this.afterStatus.find(item => {
						return item.state == res.data.status // 待付款
					})
					console.log(this.statusInfo);
				}else{
					uni.showToast({
						title:'获取发票单详情失败，错误信息：'+res.erroMessage
					})
				}
				
			},
			navBack(){
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				if(beforePage.route === 'pages/purchase/order/detials'){
					uni.navigateBack(); 
				}else{
					this.$mRouter.redirectTo({
						route: '/pages/purchase/afterOdrer/index'
					})
				}
			},
			back() {
				if(this.routeFrom == 'order'){
					this.$mRouter.redirectTo({
						route: '/pages/purchase/order/details?id='+this.routeOrderId
					})
				}else{
					this.$mRouter.redirectTo({
						route: '/pages/purchase/afterOdrer/index'
					})
				}
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.add-btn{
			width: 100rpx;
			height: 100rpx;
			background-color: #FFBB1A;
			margin-right: 30rpx;
			z-index: 11;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow:  0rpx 0rpx 30rpx rgba(144,144,144,0.3);
		}
		.payorder-list-image{
			width: 42rpx;
			height: 42rpx;
			transition:transform .8s ;
		}
		.payorder-list-image-active{
			transform: rotateX(180deg);
			transition:transform .8s ;
		}
		.footer {
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			z-index: 9;
			width: 100%;
			height: 160rpx;
			padding: 0 30rpx;
		}
</style>
